<template>
	<el-card shadow="never" header="当前已用量">
		<el-alert title="剩余量不足时文件无法存储，且系统默认只保留近30天的文件。" type="info" show-icon
				  style="margin-bottom: 15px;"/>
		<el-progress :text-inside="true" :stroke-width="20" :color="color"
					 :percentage="
					 statistics.usedSpace ? this.$TOOL.number.multiply(this.$TOOL.number.divide(statistics.usedSpace, statistics.totalSpace, 2), 100) : 0+'GB'"
					 :format="format"/>
		<el-row :gutter="15" style="margin-top: 20px;">
			<el-col :lg="6">
				<el-card shadow="never">
					<sc-statistic title="文档" :value="formatConsumption(statistics.documentOccupySpace)" suffix=""
								  groupSeparator></sc-statistic>
				</el-card>
			</el-col>
			<el-col :lg="6">
				<el-card shadow="never">
					<sc-statistic title="图片" :value="formatConsumption(statistics.pictureOccupySpace)" suffix=""
								  groupSeparator></sc-statistic>
				</el-card>
			</el-col>
			<el-col :lg="6">
				<el-card shadow="never">
					<sc-statistic title="视音频" :value="formatConsumption(statistics.videoAndAudioOccupySpace)"
								  suffix="" groupSeparator></sc-statistic>
				</el-card>
			</el-col>
			<el-col :lg="6">
				<el-card shadow="never">
					<sc-statistic title="其他" :value="formatConsumption(statistics.otherOccupySpace)" suffix=""
								  groupSeparator></sc-statistic>
				</el-card>
			</el-col>
		</el-row>


		<el-header :height="headerHeight" style="display:block">
			<el-row :gutter="20">
				<el-col :span="24">
					<el-form :inline="true" class="content-input-length" label-width="68px">
						<el-form-item label="文件标识">
							<el-input v-model="search.fileId" placeholder="文件ID" clearable/>
						</el-form-item>
						<el-form-item label="文件类型">
							<el-input v-model="search.type" placeholder="文件类型" clearable/>
						</el-form-item>
						<el-form-item label="来源类型">
							<el-select placeholder="请选择" v-model="search.operationType" filterable clearable>
								<el-option v-for="item in operationTypes" :key="item.label" :label="item.label"
										   :value="item.label"/>
							</el-select>
						</el-form-item>
						<el-form-item style="width: 110px">
							<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
							<el-button icon="el-icon-refresh" @click="searchReset"></el-button>
						</el-form-item>
					</el-form>
				</el-col>

			</el-row>
			<el-row :gutter="20" id="operation">
				<el-col :span="24">
					<el-button type="primary" plain icon="el-icon-plus" size="small" @click="add">自定义上传</el-button>
					<el-button type="danger" plain icon="el-icon-delete" size="small" :disabled="selection.length==0"
							   @click="batch_del">删除
					</el-button>
				</el-col>
			</el-row>
		</el-header>

		<el-main class="nopadding">
			<scTable ref="table" :pageSize="10" :apiObj="apiObj" :hideImport="true" :hideExport="true"
					 @selection-change="selectionChange" remoteSort
					 remoteFilter>
				<el-table-column type="selection" width="50"></el-table-column>
				<el-table-column label="文件标识ID" prop="fileId" min-width="180"></el-table-column>
				<el-table-column label="文件来源" prop="source" min-width="200"></el-table-column>
				<el-table-column label="来源类型" prop="operationType" min-width="142"></el-table-column>
				<el-table-column label="文件类型" prop="type" min-width="142">
					<template #default="scope">
						{{ scope.row.type }}
						<!--						<el-tag style="width: 43px" class="ml-2" type="success">-->
						<!--							{{ scope.row.type }}-->
						<!--						</el-tag>-->
					</template>
				</el-table-column>
				<el-table-column label="文件大小(KB)" prop="size" min-width="142">
					<template #default="scope">
						{{
							scope.row.size != undefined && scope.row.size != 0 ? this.$TOOL.number.divide(scope.row.size, 1024, 3) : 0
						}}
					</template>
				</el-table-column>
				<el-table-column label="文件状态" prop="statusName" min-width="142">
					<template #default="scope">
						<el-tag style="width: 58px" class="ml-2" type="warning" v-if="scope.row.status == 1">
							{{ scope.row.statusName }}
						</el-tag>
						<el-tag style="width: 58px" class="ml-2" type="success" v-if="scope.row.status == 2">
							{{ scope.row.statusName }}
						</el-tag>
						<el-tag style="width: 58px" class="ml-2" type="error" v-if="scope.row.status == 3">
							{{ scope.row.statusName }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="创建时间" prop="createTime" min-width="160"></el-table-column>
				<el-table-column label="操作" fixed="right" align="center" width="140">
					<template #default="scope">
						<el-button plain type="primary" size="small" :disabled="scope.row.status != 2"
								   @click="table_download(scope.row)">
							下载
						</el-button>
						<el-button plain type="danger" size="small" :disabled="scope.row.status == 1"
								   @click="table_del(scope.row)">删除
						</el-button>
					</template>
				</el-table-column>
			</scTable>
		</el-main>
	</el-card>
</template>

<script>
import scStatistic from '@/components/scStatistic';

export default {
	components: {
		scStatistic
	},
	data() {
		return {
			value: 0,
			color: [
				{color: '#67C23A', percentage: 40},
				{color: '#E6A23C', percentage: 60},
				{color: '#F56C6C', percentage: 80},
			],
			headerHeight: "45px",
			selection: [],
			statistics: {
				documentOccupySpace: 0,
				otherOccupySpace: 0,
				pictureOccupySpace: 0,
				totalSpace: 0,
				usedSpace: 0,
				videoAndAudioOccupySpace: 0
			},
			apiObj: this.$API.home.personal.fileList,
			search: {},
			operationTypes: []
		}
	},
	watch: {},
	mounted() {
		// 菜单页面中 <el-header :height="headerHeight">...</el-header> 头部查询条件和新增编辑按钮区域高度
		this.headerHeight = this.$TOOL.page.updateHeight();
		this.getInitData();
	},
	methods: {
		/**
		 * 进度条用量显示
		 * @returns {string}
		 */
		format() {
			let totalSpace = this.$TOOL.number.divide(this.statistics.totalSpace, 1024, 3);
			totalSpace = this.$TOOL.number.divide(totalSpace, 1024, 3);

			let divide = this.$TOOL.number.divide(this.statistics.usedSpace, 1024, 3);
			divide = this.$TOOL.number.divide(divide, 1024, 3);
			let number = parseInt(divide);
			if (number < 100) {
				return divide.toFixed(2) + "MB" + "/" + totalSpace.toFixed(2) + "GB"
			}
			divide = this.$TOOL.number.divide(divide, 1024, 3);
			return divide.toFixed(2) + "GB" + "/" + totalSpace.toFixed(2) + "GB"
		},

		/**
		 * 格式化文件用量数据 b -> MB/GB
		 * @param val 用量单位字节b
		 * @returns {string}
		 */
		formatConsumption(val) {
			let divide = this.$TOOL.number.divide(val, 1024, 3);
			divide = this.$TOOL.number.divide(divide, 1024, 3);
			let number = parseInt(divide);
			if (number < 100) {
				return divide.toFixed(2) + "MB"
			}
			divide = this.$TOOL.number.divide(divide, 1024, 3);
			return divide.toFixed(2) + "GB"
		},

		/**
		 * 初始化加载
		 * @returns {Promise<void>}
		 */
		async getInitData() {
			let statistics = await this.$API.home.personal.statistics.get();
			this.statistics = statistics.data

			let res = await this.$API.home.personal.findOperationTypes.get();
			this.operationTypes = res.data
		},

		/**
		 * 搜索
		 */
		async upsearch() {
			this.$refs.table.upData(this.search)
			let statistics = await this.$API.home.personal.statistics.get();
			this.statistics = statistics.data
		},

		/**
		 * 搜索条件重置
		 */
		async searchReset() {
			this.search = {
				fileId: '',
				status: null,
				type: '',
				source: '',
				operationType: ''
			};
			this.upsearch();
		},

		/**
		 * 表格行选择后回调事件
		 * @param selection
		 */
		async selectionChange(selection) {
			this.selection = selection;
		},

		/**
		 * 文件下载
		 * @param selection
		 */
		async table_download(row) {
			this.$API.home.personal.downloadFile.get({fileId: row.fileId});
		},

		/**
		 * 文件删除
		 * @param selection
		 */
		async table_del(row) {
			this.$confirm(`确定删除 ${row.fileId} 文件吗？`, '提示', {
				type: 'warning'
			}).then(async () => {
				const loading = this.$loading();
				let res = await this.$API.home.personal.deleteFile.delete({fileId: row.fileId})
				if (res.status == 200) {
					this.upsearch()
					this.$message.success("删除成功")
				}
				loading.close();
			}).catch(() => {

			})
		},

		/**
		 * 批量删除
		 * @returns {Promise<void>}
		 */
		async batch_del() {
			this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？`, '提示', {
				type: 'warning'
			}).then(async () => {
				const loading = this.$loading();
				let ids = [];
				for (let item of this.selection) {
					ids.push(item.fileId);
				}
				let reqData = {fileIdMany: ids.toString()}
				let res = await this.$API.home.personal.delBatchFile.delete(reqData);
				if (res.status == 200) {
					this.upsearch()
					this.$message.success("删除成功")
				}
				loading.close();
			}).catch(() => {

			})
		},

		add() {

		}

	}
}
</script>

<style>
</style>
